<template>
  <div class="wrap">
    <SkyCardPanel title="标记">
      <div slot="main">
        <div class="block">
          <sky-badge :value="12" class="item">
            <sky-button type="secondary">通用</sky-button>
          </sky-badge>
          <span></span>
        </div>
        <hr  />
        <div class="block">
          <sky-badge  is-dot class="item">
            <sky-button type="secondary">通用</sky-button>
          </sky-badge>
        </div>
        <hr  />
        
        <div class="block">
          <sky-badge :value="12" class="item" type="primary">
            <sky-button type="secondary">回复</sky-button>
          </sky-badge>
        </div>
        <hr />
         <div class="block">
          <sky-badge :value="12" class="item" type="success">
            <sky-button type="secondary">回复</sky-button>
          </sky-badge>
        </div>
        <hr />
         <div class="block">
          <sky-badge :value="12" class="item" type="warning">
            <sky-button type="secondary">回复</sky-button>
          </sky-badge>
        </div>
        <hr />
         <div class="block">
          <sky-badge :value="12" class="item" type="danger">
            <sky-button type="secondary">回复</sky-button>
          </sky-badge>
        </div>
       
      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              
        &lt;sky-badge :value="12" class="item"&gt;
          &lt;sky-button type="secondary"&gt;通用&lt;/sky-button&gt;
        &lt;/sky-badge&gt;

         &lt;sky-badge is-dot class="item"&gt;
          &lt;sky-button type="secondary"&gt;通用&lt;/sky-button&gt;
        &lt;/sky-badge&gt;


        &lt;sky-badge :value="12" class="item"  type="primary"&gt;
          &lt;sky-button type="secondary"&gt;回复&lt;/sky-button&gt;
        &lt;/sky-badge&gt;
        
         &lt;sky-badge :value="12" class="item"  type="success"&gt;
          &lt;sky-button type="secondary"&gt;回复&lt;/sky-button&gt;
        &lt;/sky-badge&gt;

         &lt;sky-badge :value="12" class="item"  type="warning"&gt;
          &lt;sky-button type="secondary"&gt;回复&lt;/sky-button&gt;
        &lt;/sky-badge&gt;

        &lt;sky-badge :value="12" class="item"  type="danger"&gt;
          &lt;sky-button type="secondary"&gt;回复&lt;/sky-button&gt;
        &lt;/sky-badge&gt;
              
          </code>
      </pre>
      </div>
    </SkyHiddenPanel>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.Rate-Demo-Page {
  & /deep/ .card-main {
    padding: 20px !important;
  }
}

.hr {
  margin: 20px 0;
}
</style>